<template>
  <div class="shopcart">
    <!--顶部导航-->
    <top-nav></top-nav>
    <!-- logo -->
    <div class="container-fluid">
      <div class="login-header">
        <img
          src="https://img.alicdn.com/tfs/TB1_Gn8RXXXXXXqaFXXXXXXXXXX-380-54.png"
          alt=""
        />
      </div>
    </div>
    <!-- 购物车 -->
    <div class="shopcart-content">
      <!-- 头部 -->
      <div class="shopcart-content-header">
        <div class="shopcart-titles">
          <h3>购物车</h3>
        </div>
        <div class="sum">
          <div>已选商品（不含运费)</div>
          <div class="price">￥<em></em>{{ sumtotal }}</div>
          <div><button class="btn">结算</button></div>
        </div>
      </div>
      <!-- 表头 -->
      <div class="cart-thead">
        <div class="cart-checked">
          <input type="checkbox"  v-model="checked" @click="checkAll" name="" id="" /><em>&ensp;</em>全选
        </div>
        <div class="shop">商品</div>
        <div class="dprice">单价</div>
        <div class="num">数量</div>
        <div class="xiaoji">小计</div>
        <div class="caozuo">操作</div>
      </div>
      <!-- 商品信息 -->

      <div class="cart-info" v-for="(item, index) in shop" :key="index">
        <div class="cart-checked">
          <input
            type="checkbox"
            v-model="result"
            @change="checkchange(index)"
            :value="item.id"
          /><em>&ensp;</em>&ensp;&ensp;&ensp;&ensp;
        </div>
        <div class="shop">
          <div class="photo">
            <img :src="item.cover_url" />
          </div>
          <div class="text">
            {{ item.title }}
          </div>
        </div>
        <div class="dprice">￥{{ item.price }}</div>
        <div class="num">
          <div class="salu">
            <button
              @click="salu(index)"
              :disabled="item.num == 1"
              class="btn-defult"
            >
              -
            </button>
          </div>
          <div class="number">
            <input
              type="text"
              style="text-align: center"
              v-model="item.num"
              @change="onchange"
            />
          </div>
          <div class="add" @click="add(index)">+</div>
        </div>
        <div class="xiaoji">￥{{ (item.num * item.price).toFixed(2) }}</div>
        <div class="caozuo"><a href="#" @click="deletecart(index)">删除</a></div>
      </div>

      <!-- 购物车底部 -->
      <div class="shopcart-footer">
        <div class="cart-checked">
          <input type="checkbox" v-model="checked" @click="checkAll" id="" /><em
            >&ensp;</em
          >全选
          <a href="#"></a>
          <a href="#"></a>
        </div>
        <div class="jieshuan">
          <a href="#">与选择1件商品</a>
          <a href="#"
            >总价：<span class="price">￥{{ sumtotal }}</span></a
          >
          <button class="btn">结算</button>
        </div>
      </div>
    </div>
    <!-- 侧边导航 -->
    <back-top></back-top>
    <!-- 底部 -->
    <footer-view></footer-view>
    <footers></footers>
  </div>
</template>

<script>
import TopNav from "../../components/content/TopNav.vue";
import Footers from "../index/footer/Footers.vue";
import { ref, computed } from "vue";
import { useStore } from "vuex";
import FooterView from 'views/index/footer/FooterView.vue';
import BackTop from 'components/content/backTop/BackTop.vue';
export default {
  components: { TopNav, Footers, FooterView, BackTop },
  setup(props) {
    const store = useStore();
    let result = ref([]);
    let checked = ref(false);
    result.value = store.state.cart
      .filter((n) => n.isChecked == true)
      .map((item) => item.id);

    let shop = store.state.cart;

    const checkAll = () => {
      if (!checked.value) {
        checked.value = true;
        result.value = store.state.cart.map((item) => item.id);
      } else {
        result.value = [];
        checked.value = false;
      }
    };
    const checkchange = (index) => {
      if (result.value.length == store.state.cart.length) {
        checked.value = true;
      } else {
        checked.value = false;
      }
      store.commit("change", index);
      console.log(store.state.cart)
    };
    const onchange = () => {
      total.value = price * num.value;
    };
    const add = (index) => {
      store.commit("add", index);
    };
    const salu = (index) => {
      store.commit("salu", index);
    };

    const sumtotal = computed(() => {
      let sum = 0;
      store.state.cart
        .filter((n) => result.value.includes(n.id))
        .forEach((item) => {
          sum += item.price * item.num;
        });
      return sum.toFixed(2);
    });
    const  deletecart=(index)=>{
        store.commit('delshopcart',index)
    }
    return {
      deletecart,
      checkAll,
      result,
      checked,
      sumtotal,
      shop,
      salu,
      add,
      onchange,
      checkchange,
    };
  },
};
</script>

<style scoped>
.container-fluid {
  padding: 0px;
  background: #ffffff;
}
.login-header {
  position: relative;
  margin: 0 auto;
  background: #ffffff;
  padding: 22px 0;
  width: 1190px;
  height: 70px;
}
.login-header > img {
  position: absolute;
  left: 10px;
  width: auto;
  height: 25px;
}
.shopcart-content {
  background: #ffffff;
  width: 1190px;

  border-radius: 20px;

  margin: 30px auto;
}
.shopcart-content-header {
  border-bottom: 1px solid #ccc;
  padding: 20px;
  display: flex;
}
.shopcart-content-header > div {
  flex: 1;
}
.btn {
  background: #ff5000;
  color: #ffffff;
  width: 74px;
  height: 42px;
  padding: 10px;
  font-size: 16px;
  border-radius: 21px;
}
.shopcart-content-header > .shopcart-titles > h3 {
  overflow: hidden;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  height: 50px;
  line-height: 50px;
  text-align: left;
}
.shopcart-content-header .sum {
  display: flex;
  justify-content: right;
  height: 50px;
  line-height: 50px;
}
.cart-thead {
  margin-top: 10px;
  background: #ccc;
  padding: 10px;
  display: flex;
}
.cart-checked,
.dprice,
.num,
.xiaoji,
.caozuo {
  flex: 0.5;
  font-size: 12px;
}
.shop {
  text-align: left;
  flex: 1;
  font-size: 12px;
}
.cart-info {
  border-top: 2px solid#ccc;
  margin-top: 10px;

  padding: 10px;
  display: flex;
}
.shop {
  display: flex;
}
.shop > .photo {
  width: 92px;
  height: 92px;
}
.shop img {
  width: 80px;
  height: 80px;
}
.text {
  padding: 10px;
}
.num {
  justify-content: center;
  display: flex;
}
.num > .add,
.salu {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 20px;
  height: 22px;
}
.number {
  width: auto;
  height: auto;
}
.num > .number input {
  width: 50px;
}
.shopcart-footer {
  padding-left: 10px;
  display: flex;
}
.cart-checked {
  height: 50px;
  text-align: left;
}
.cart-checked a,
.jieshuan > a {
  line-height: 50px;
  margin: 0 10px;
  text-decoration: none;
  color: rgb(102, 102, 102);
}
.jieshuan {
  font-size: 12px;
  line-height: 50px;
  padding-right: 30px;
  text-align: right;
  flex: 1;
}
.btn-defult {
  border: 0px;
  background: none;
}
</style>